<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    title:String
})
</script>

<template>
    <div class="Page">
        <div class="top">
            <h2 class="title">{{ props.title }}</h2>
            <slot name="extra"></slot>
            <div class="bar"></div>
        </div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.Page{
    .top{
        border-bottom: 1px solid #b3b2b2;
        h2 {
            line-height: 80px;
            font-size: 24px;
            color: rgb(52, 100, 224);
        }
        .bar {
            width: 48px;
            height: 4px;
            background-color: skyblue;
        }
    }
   
}
</style>